import Base from '@/components/Base';
import {
  Typography,
  Button,
  Card,
  Form,
  Radio,
  Input,
  Badge,
  Select,
  Table,
  Modal,
  message,
  Popover,
  Divider,
} from 'antd';
import { KayButton, View } from '@/components/KayUI';
import intf from '@/modules/interface';
import styles from './index.less';
import ButtonSvg1 from '@/components/KayUI/ButtonSvg1';
const { Title, Paragraph, Text } = Typography;
const { gsap, Flip } = intf;

interface State {
  isNight?: boolean;
}

export default class Index extends Base<any, State> {
  public state: State = {};

  public async didShow() {}

  public async didMount() {
    // console.log('history', this.navigator.history)

    if (!this.privFit) {
      this.privFit = Flip.getState("[gsap-id='fit1']");
    }
  }

  public render() {
    const { isNight } = this.state;
    return (
      <div style={{ flexDirection: 'row', alignItems: 'center' }}>
        <Typography className={styles.contentBox}>
          <Title level={3}>WebGL</Title>
          <Paragraph>
            <p>
              GSAP Github：
              <a href="https://github.com/greensock/GSAP" target="_blank">
                https://github.com/greensock/GSAP
              </a>
            </p>
            <Title level={4}>Flip</Title>
            <p>FLIP means: "First", "Last", "Invert", "Play"</p>
            <p>主要处理sizing，rotation，position状态</p>
            <p>可以注册显示状态，然后在不同的状态之间切换，不需要考虑排版</p>
            <p>
              父元素在relative环境下，且后面跟了元素的情况下，要避免position，display等布局的切换，如下：
            </p>
          </Paragraph>
        </Typography>

        <div style={{ overflow: 'hidden' }}>
          <div className={styles.flipBox} gsap-id="flipBox">
            <div className={styles.box} gsap-id="box">
              <span>Common "FLIP" techniques employed by other tools</span>
            </div>
            <div className={styles.box} gsap-id="box">
              <span>
                won't work with flex elements because of the way browsers handle
                width/height.{' '}
              </span>
            </div>
          </div>
        </div>
        <Button onClick={this.handleToggleFlip}>切换</Button>

        <div className={styles.fitBox}>
          <div className={styles.fit1} gsap-id="fit1">
            <div className={styles.bord} gsap-id="fitBord"></div>
            <p>test fit</p>
            <div className={this.cx(styles.bord, styles.green)}></div>
          </div>
          <div className={styles.fit2} gsap-id="fit2">
            <div className={this.cx(styles.bord, styles.red)}></div>
          </div>
        </div>
        <View style={{ flexDirection: 'row' }}>
          <Button onClick={this.handleFit}>TO Fit all</Button>
          <Button onClick={this.handleFit.bind(null, 1)}>TO Fit first</Button>
          <Button onClick={this.handleFit.bind(null, 2)}>回原位</Button>
          <Button onClick={this.handleFitRotate}>转一下</Button>
        </View>
        <Divider />

        <Typography className={styles.contentBox}>
          <Title level={4}>MorphSVGPlugin</Title>
          <p>这是收费插件，此处仅为研究使用。</p>
          <p>svg变形动画</p>
          <a href="https://greensock.com/morphsvg/" target="_blank">
            https://greensock.com/morphsvg/
          </a>
        </Typography>

        <div
          className={styles.uploadButton}
          gsap-id="uploadButton"
          onClick={this.handleUploadClick}
        >
          <div className={styles.default} gsap-id="default">
            <div>
              <div>
                <span>U</span>
                <span>p</span>
                <span>l</span>
                <span>o</span>
                <span>a</span>
                <span>d</span>
              </div>
            </div>
          </div>
          <div className={styles.success} gsap-id="success">
            <svg viewBox="0 0 13 10">
              <path d="M1 5L4.66667 9L12 1"></path>
            </svg>
            <div>
              <div>
                <span>D</span>
                <span>o</span>
                <span>n</span>
                <span>e</span>
              </div>
            </div>
          </div>
          <div className={styles.dots} gsap-id="dots">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </div>
          <svg viewBox="0 0 132 52" gsap-id="svg">
            <path d="M2 11C2 7.13401 5.13401 4 9 4C12.866 4 39.7401 4 66 4C92.2599 4 119.134 4 123 4C126.866 4 130 7.13401 130 11V41C130 44.866 126.866 48 123 48C119.134 48 92.2599 48 66 48C39.7401 48 12.866 48 9 48C5.13401 48 2 44.866 2 41V11Z"></path>
          </svg>
        </div>

        <View style={{ alignItems: 'center' }}>
          <ButtonSvg1 />
        </View>
      </div>
    );
  }

  private handleToggleFlip = () => {
    const flipbox: any = document.querySelector("[gsap-id='flipBox']");
    // Get the initial state
    const stateOuter = Flip.getState("[gsap-id='flipBox']");
    const stateBox = Flip.getState("[gsap-id='box']");
    flipbox.style.flexDirection =
      flipbox.style.flexDirection == 'column' ? 'row' : 'column';

    Flip.from(stateOuter, {
      // absolute: true, // uses position: absolute during the flip to work around flexbox challenges
      duration: 0.5,
      stagger: 0.1,
      ease: 'power1.inOut',
    });
    Flip.from(stateBox, {
      absolute: true, // uses position: absolute during the flip to work around flexbox challenges
      duration: 0.5,
      stagger: 0.1,
      ease: 'power1.inOut',
    });
  };

  private privFit: any = null;
  private handleFit = (num?: any) => {
    // const fit1 = document.querySelector("[gsap-id='fit1']");
    if (num == 2) {
      Flip.fit("[gsap-id='fit1']", this.privFit, {
        duration: 1,
        scale: true,
      });
      return;
    }
    Flip.fit("[gsap-id='fit1']", "[gsap-id='fit2']", {
      duration: 1,
      fitChild: num == 1 ? "[gsap-id='fitBord']" : '',
      scale: true,
    });
  };
  private handleFitRotate = () => {
    gsap.to("[gsap-id='fit2']", {
      duration: 0.5,
      rotate: '+=' + (Math.random() * 20 + 10) + 'deg',
      scale: Math.random() * 0.2 + 0.9,
    });
  };

  private handleUploadClick = (e) => {
    const button: any =
      document.querySelector("[gsap-id='uploadButton']") || {};
    if (button.active) {
      return;
    }
    button.active = true;

    const path = button.querySelector("[gsap-id='svg'] path");
    const dots = button.querySelectorAll("[gsap-id='dots'] span");
    const defaultLetters = button.querySelectorAll("[gsap-id='default'] span");
    const successLetters = button.querySelectorAll("[gsap-id='success'] span");
    const successTick = button.querySelector("[gsap-id='success'] svg");

    // console.log('e', path)
    // return;

    const reset = () => {
      gsap.to(successTick, {
        strokeDashoffset: '17px',
        duration: 0.15,
      });

      gsap.to(successLetters, {
        stagger: 0.075,
        scale: 0.25,
        opacity: 0,
        duration: 0.15,
        onComplete: () => {
          gsap.to(defaultLetters, {
            stagger: 0.075,
            scale: 1,
            opacity: 1,
            duration: 0.15,
            onComplete: () => {
              button.active = false;
            },
          });
        },
      });
    };

    gsap.to([...defaultLetters].reverse(), {
      stagger: 0.1, //延迟
      keyframes: [
        {
          scale: 1.075,
          duration: 0.15,
        },
        {
          scale: 0.2,
          opacity: 0,
          duration: 0.2,
        },
      ],
      onComplete: () => {
        gsap.to(dots, {
          stagger: 0.075,
          keyframes: [
            {
              y: -5,
              scale: 1,
              duration: 0.25,
            },
            {
              y: 5,
              duration: 0.25,
            },
            {
              y: -5,
              duration: 0.25,
            },
            {
              y: 5,
              duration: 0.25,
            },
            {
              y: -5,
              duration: 0.25,
            },
            {
              y: 5,
              scale: 0,
              duration: 0.25,
            },
          ],
        });

        gsap.to(path, {
          keyframes: [
            {
              duration: 0.25,
              morphSVG:
                'M2 11C2 7.13405 5.13401 5.00004 9 4.00004C12.866 3.00004 39.7401 -1.99996 66 4.00004C92.2599 10 119.134 5.00004 123 4.00004C126.866 3.00004 130 7.13405 130 11V41C130 44.866 126.866 47 123 48C119.134 49 92.2599 54 66 48C39.7401 42 12.866 47 9 48C5.13401 49 2 44.866 2 41V11Z',
            },
            {
              duration: 0.25,
              morphSVG:
                'M2 11C2 7.13405 5.13401 3.00004 9 4.00004C12.866 5.00004 39.7401 10 66 4.00004C92.2599 -1.99996 119.134 3.00004 123 4.00004C126.866 5.00004 130 7.13405 130 11V41C130 44.866 126.866 49 123 48C119.134 47 92.2599 42 66 48C39.7401 54 12.866 49 9 48C5.13401 47 2 44.866 2 41V11Z',
            },
            {
              duration: 0.25,
              morphSVG:
                'M2 11C2 7.13405 5.13401 5.00004 9 4.00004C12.866 3.00004 39.7401 -1.99996 66 4.00004C92.2599 10 119.134 5.00004 123 4.00004C126.866 3.00004 130 7.13405 130 11V41C130 44.866 126.866 47 123 48C119.134 49 92.2599 54 66 48C39.7401 42 12.866 47 9 48C5.13401 49 2 44.866 2 41V11Z',
            },
            {
              duration: 0.25,
              morphSVG:
                'M2 11C2 7.13405 5.13401 3.00004 9 4.00004C12.866 5.00004 39.7401 10 66 4.00004C92.2599 -1.99996 119.134 3.00004 123 4.00004C126.866 5.00004 130 7.13405 130 11V41C130 44.866 126.866 49 123 48C119.134 47 92.2599 42 66 48C39.7401 54 12.866 49 9 48C5.13401 47 2 44.866 2 41V11Z',
            },
            {
              duration: 0.25,
              morphSVG:
                'M2 11C2 7.13405 5.13401 5.00004 9 4.00004C12.866 3.00004 39.7401 -1.99996 66 4.00004C92.2599 10 119.134 5.00004 123 4.00004C126.866 3.00004 130 7.13405 130 11V41C130 44.866 126.866 47 123 48C119.134 49 92.2599 54 66 48C39.7401 42 12.866 47 9 48C5.13401 49 2 44.866 2 41V11Z',
            },
            {
              duration: 0.25,
              morphSVG:
                'M2 11C2 7.13401 5.13401 4 9 4C12.866 4 39.7401 4 66 4C92.2599 4 119.134 4 123 4C126.866 4 130 7.13401 130 11V41C130 44.866 126.866 48 123 48C119.134 48 92.2599 48 66 48C39.7401 48 12.866 48 9 48C5.13401 48 2 44.866 2 41V11Z',
            },
          ],
          onComplete: () => {
            gsap.to(successTick, {
              strokeDashoffset: '0px',
              duration: 0.2,
              onComplete: () => {
                gsap.to(successLetters, {
                  stagger: 0.075,
                  keyframes: [
                    {
                      scale: 1.1,
                      opacity: 1,
                      duration: 0.15,
                    },
                    {
                      scale: 1,
                      duration: 0.15,
                    },
                  ],

                  onComplete: () => {
                    gsap.to(button, {
                      keyframes: [
                        {
                          scale: 1.05,
                          duration: 0.15,
                        },
                        {
                          scale: 1,
                          duration: 0.1,
                          clearProps: true,
                        },
                      ],
                      onComplete: () => {
                        setTimeout(reset, 2000);
                      },
                    });
                  },
                });
              },
            });
          },
        });
      },
    });
  };
}
